<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <title>在线留言</title>
    {include file='commonjs'}
</head>

<body class="page message">

    <!-- c-nav 开始 -->
    {include file='common_head'}
    <!-- c-nav 结束 -->

    <!-- c-banner 开始 -->
    <div class="c-banner">
        <div class="banner">
            <img class="banner-pic" src="/static/index/img/page/message/mes_banner.png" alt="">
        </div>
    </div>
    <!-- c-banner 结束 -->

    <!-- mes_main 开始 -->
    <div class="mes_main PB-100">
        <div class="i_title PB-60">
            <p>FEEDBACK</p>
            <p>在线留言</p>
        </div>
        <div class="mesBox clearfix">
            <div class="mesBox-pic">
                <img src="/static/index/img/page/message/mes_pic.png" alt="">
            </div>
            <div class="mesBox-form">
                <form>
                    <p class="mesBox-form-title">
                        留下你的宝贵意见，我们将竭诚为你解答和服务！
                    </p>
                    <p class="mesBox-form-text">
                        LEAVE YOUR VALUABLE ADVICE, WE WILL BE HAPPY TO
                        ANSWER YOUR QUESTIONS AND SERVICES!
                    </p>
                    <div class="mesBox-form-line">
                        <label for="mName">姓名：</label>
                        <input name="mName" id="mName" type="text">
                    </div>
                    <div class="mesBox-form-line">
                        <label for="mPhone">电话：</label>
                        <input name="mPhone" id="mPhone" type="text">
                    </div>
                    <div class="mesBox-form-line">
                        <label for="mCorp">公司：</label>
                        <input name="mCorp" id="mCorp" type="text">
                    </div>
                    <div class="mesBox-form-line">
                        <label for="mIdea" class="mIdea">内容：</label>
                        <textarea id="mIdea" name="mIdea"></textarea>
                    </div>
                    <div class="mesBox-form-but">
                        <input type="reset" value="重置">
                        <input type="submit" value="提交">
                    </div>
                </form>
                <script>
                    require([ 'SMV', 'layer'], function(SMV, layer) {
                        new SMV('form', {
                            rules: {
                                onlyPhone:[/^1[34578]\d{9}$/,"手机号码格式有误"]
                            },
                            fields: {
                                mName: {
                                    required: "姓名未填写",
                                    failHtml: false,
                                    rule: "required|disblur",
                                    fail: function (messages) {

                                    },
                                    failStyle: {
                                        border: "1px solid red"
                                    }
                                },
                                mPhone: {
                                    required: "号码未填写",
                                    failHtml: false,
                                    rule: "required|disblur|onlyPhone",
                                    fail: function (messages) {

                                    },
                                    failStyle: {
                                        border: "1px solid red"
                                    }
                                },
                                mCorp: {
                                    required: "公司未填写",
                                    failHtml: false,
                                    rule: "required|disblur",
                                    fail: function (messages) {

                                    },
                                    failStyle: {
                                        border: "1px solid red"
                                    }
                                },
                                mIdea: {
                                    required: "意见未填写",
                                    failHtml: false,
                                    rule: "required|disblur",
                                    fail: function (messages) {

                                    },
                                    failStyle: {
                                        border: "1px solid red"
                                    }
                                }
                            },
                            short: true,
                            submit: function(valid, form) {
                                if(valid) {
                                    form.submit();
                                }else {
                                    layer.msg('信息有误！', {icon: 5});
                                }
                            }
                        })
                    })
                </script>
            </div>
        </div>
    </div>
    <!-- mes_main 结束 -->

    <!-- c-footer 开始 -->
    {include file='common_footer'}
    <!-- c-footer 结束 -->

    <script>
        require(['jquery', 'SMV', 'layer'], function($, SMV, layer) {

            // nav
            $(window).scroll( function() {
                var t = $(document).scrollTop();
                if (t > 0) {
                    $(".c-nav").addClass("c_nav-scroll");
                }else {
                    $(".c-nav").removeClass("c_nav-scroll");
                }
            });

            // 留言
            new SMV('form', {
                rules: {
                    onlyPhone:[/^1[34578]\d{9}$/,"手机号码格式有误"]
                },
                fields: {
                    name: {
                        required: "姓名未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#name');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    phone: {
                        required: "号码未填写",
                        failHtml: false,
                        rule: "required|disblur|onlyPhone",
                        fail: function (messages) {
                            layer.tips(messages, '#phone');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    corp: {
                        required: "公司未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#corp');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    idea: {
                        required: "意见未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#idea');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    }
                },
                short: true,
                submit: function(valid, form) {
                    if(valid) {
                        form.submit();
                    }
                }
            })
        })
    </script>
</body>

</html>